<template>
<!-- 堆叠横向柱形图 -->
<div class="chart-container" :style="position">
      <div :id="id" class="chart-main">

      </div>
      <i class="i_tl"></i>
      <i class="i_tr"></i>
      <i class="i_bl"></i>
      <i class="i_br"></i>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {onMounted, reactive,watch} from 'vue'
export default {
  name:'FoldBarChart',
  props:{
    data:{
      type:Object,
      default:{}
    },
    info: {
      type: Object,
      default: () => ({})
    },
    boxPosition:{       
      type:Object,       
      default:()=>{}     
    }
  },
  setup(props){
    const position = `left:${props.boxPosition?.left}px;top:${props.boxPosition?.top}px;`
    let option;
    let myChart;
    const id = 'foldbar-main'+Number(Math.random()*100).toFixed(4)
    onMounted(()=>{
      myChart = echarts.init(document.getElementById(id));
      option = reactive({
          title: {
              text: '学员贡献TOP20',
              textStyle: {
                fontSize: 14,
                color: "#74bdff"
              },
              left:'5%',
              top:'5%',
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {            // Use axis to trigger tooltip
                  type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
              },
              formatter:(params)=>{
                  let str; //判断用户取消展示项
                  if (params.length == 4) {
                      str = `第${params[0].dataIndex+1}名：${params[0].name}<br>
                          ${params[0].marker} ${params[0].seriesName}：${params[0].value}<br>
                          ${params[1].marker} ${params[1].seriesName}：${params[1].value}<br>
                          ${params[2].marker} ${params[2].seriesName}：${params[2].value}<br>
                          ${params[3].marker} ${params[3].seriesName}：${params[3].value}<br>`
                  }else if(params.length == 3){
                      str = `第${params[0].dataIndex+1}名：${params[0].name}<br>
                          ${params[0].marker} ${params[0].seriesName}：${params[0].value}<br>
                          ${params[1].marker} ${params[1].seriesName}：${params[1].value}<br>
                          ${params[2].marker} ${params[2].seriesName}：${params[2].value}<br>`
                  }else if(params.length == 2){
                      str = `第${params[0].dataIndex+1}名：${params[0].name}<br>
                          ${params[0].marker} ${params[0].seriesName}：${params[0].value}<br>
                          ${params[1].marker} ${params[1].seriesName}：${params[1].value}<br>`
                  }else if(params.length == 1){
                      str = `第${params[0].dataIndex+1}名：${params[0].name}<br>
                          ${params[0].marker} ${params[0].seriesName}：${params[0].value}<br>`
                  }else{
                      str = ''
                  }
                      
                return str
              }
          },
          legend: {
              data: ['发布微课', '发布话题', '发布问答', '发表评论'],
              top:10,
              right:50,
              textStyle: {
                color: "#7585a7"
              },
              itemWidth:10,
              itemHeight:10
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '8%',
              containLabel: true
          },
          xAxis: {
              type: 'value',
              axisLabel:{
                  show:false
              },
              splitLine:{
                  show:false
              },
              axisLine:{
                  show:false  
              },
          },
          yAxis: [{
              type: 'category',
              data: ['小马', '133****3333', '小刘', '小张', '日子过的不错的乡长'],
              inverse:true,
              axisPointer: {
                    type: 'none'
                },
                axisTick:{
                    show: false
                },
                axisLine:{
                    show: false
                },
              },{
                  type:'category',
                  data:[1,2,3,4,5],
                  inverse:true,
                  offset:120,
                    axisPointer: {
                        type: 'none'
                    },
                    axisTick:{
                        show: false
                    },
                    axisLine:{
                        show: false
                    },
                  position:'left',
              },
              {
                  type:'category',
                  data:[5000,4000,3000,2000,1000],
                    axisPointer: {
                        type: 'none'
                    },
                    axisTick:{
                        show: false
                    },
                    axisLine:{
                        show: false
                    },
                  position:'right',
              },
          ],
          series: [
              {
                  name: '发布微课',
                  type: 'bar',
                  stack: 'total',
                  label: {
                      show: true
                  },
                  data: [320, 302, 301, 334, 390],
                  barWidth:15,
              },
              {
                  name: '发布话题',
                  type: 'bar',
                  stack: 'total',
                  label: {
                      show: true
                  },
                  data: [120, 132, 101, 134, 90],
                  barWidth:15,
              },
              {
                  name: '发布问答',
                  type: 'bar',
                  stack: 'total',
                  label: {
                      show: true
                  },
                  data: [220, 182, 191, 234, 290],
                  barWidth:15,
              },
              {
                  name: '发表评论',
                  type: 'bar',
                  stack: 'total',
                  label: {
                      show: true
                  },
                  data: [150, 212, 201, 154, 190],
                  barWidth:15,
              },
          ]
      })
      create()
    })
    const create = ()=>{
      myChart.setOption(option)
    }
    watch(
        () => props.info?.size,
        () => {
            myChart.dispose() //重置echart
            myChart = null
            myChart = echarts.init(document.getElementById(id));
            myChart.setOption(option)
        },
        { deep: true,}
    );
    return{
      position,
      id
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-container{
  width: 100%;
  height: 100%;
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;//暂时，需改为动态数据
    background-color: rgba($color: #071c55, $alpha: 0.5);
    i{
    width: 20px;
    height: 20px;
    position: absolute;
    // display: block;
  }
  .i_tl{
    top: 0;
    left: 0;
    background: url('../../assets/images/useimages/tl.png') no-repeat left top;
  }
  .i_tr{
    top: 0;
    right: 0;
    background: url('../../assets/images/useimages/tr.png') no-repeat right 1px;
  }
  .i_bl{
    bottom: 0;
    left: 0;
    background: url('../../assets/images/useimages/bl.png') no-repeat left bottom;
  }
  .i_br{
    bottom: 0;
    right: 0;
    background: url('../../assets/images/useimages/br.png') no-repeat right bottom;
  }
  }
  .chart-main{
  width: 100%;
  height: 100%;
  }
</style>